<template>
  <div v-if="postsDetailInfo!==null">
<!--    <vs-image :src="postsDetailInfo.imgUrl" class="cover"/>-->
    <div class="center">
      <vs-avatar size="70">
        <img :src="postsDetailInfo.imgUrl">
      </vs-avatar>
    </div>
    <div class="container">
      <div class="text-center">
        <h1 class="headline">{{ postsDetailInfo.title }}</h1>
        <p>
          {{ postsDetailInfo.publishDate.replace('T',' ') }}
        </p>
        <div class="center">
          <!--          <Avatar />-->
          <span class="margin">
            {{ postsDetailInfo.author }}
          </span>
        </div>
      </div>

<!--      <a-layout-content-->
<!--        style="white-space: pre-wrap;-->
<!--        font-size: 25px;-->
<!--        font-family: 'Rage Italic';-->
<!--        margin-bottom: 60px"-->
<!--        v-html="postsDetailInfo.content">-->
<!--      </a-layout-content>-->
      <template>
        <v-md-editor v-model="postsDetailInfo.content" mode="preview" height="700px" left-toolbar="undo redo"></v-md-editor>
      </template>
      <!--      <div v-for="(index,item) in commentInfoList" :key="item">-->
      <!--        {{ index.comment }}-->
      <!--      </div>-->
      <hr>
      <template>
        <a-list
          class="comment-list"
          :header="`${commentInfoTotal} 评论`"
          size="large"
          :data-source="commentInfoList"
          style="height: 50%"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <div>
              <a-icon type="user"></a-icon>
              <span>  {{ item.createTime.replace('T',' ') }}</span>
            </div>
            <a-comment :author="item.author">
              <!--              <template slot="actions">-->
              <!--                <span v-for="action in item.actions" :key="action">{{ action }}</span>-->
              <!--              </template>-->
              <vs-alert style="height: auto"  shadow >
                <p style="color: gray;font-size: 18px;font-family: 微软雅黑">{{ item.comment }}</p>
                <template #footer>
                  <vs-button gradient>
                    <a-icon type="dislike" />
                  </vs-button>
                  <vs-button gradient>
                    <a-icon type="like" />
                  </vs-button>
                </template>
              </vs-alert>
            </a-comment>
          </a-list-item>
        </a-list>
      </template>
      <template>
        <div class="center content-inputs">
          <vs-input success  v-model="commentContent" type="text" placeholder="评论一下吧~~~">
<!--            <template #icon @click="emoVisClick">-->
<!--                <i class='bx bxs-happy' ></i>-->
<!--            </template>-->
          </vs-input>
          <!--          <i class='bx bxs-paper-plane' ></i>-->
<!--          <vs-button color="danger" transparent upload >-->
<!--            <i class='bx bxs-happy'/>-->
<!--          </vs-button>-->
          <!--          <i class='bx bxs-paper-plane' ></i>-->
          <vs-button color="danger" transparent upload @click="commitComment">
            <i class='bx bxs-paper-plane'/>
          </vs-button>
          <vs-button disabled="true" duration="4" flat danger icon @click="openNotification('top-left', 'danger' )">
          </vs-button>
<!--          <VEmojiPicker v-show="emoVis"  @select="selectEmoji" />-->
        </div>
      </template>
      <template>
        <a-pagination
          v-model="commentInfoPage"
          :defaultPageSize="commentInfoSize"
          :total='commentInfoTotal'
          show-less-items
          size="small"
          @change="getCommentByPostId"
          class="ant-list-pagination"/>
      </template>
      <!--      <router-view class="post"></router-view>-->
      <PostTags :postTags="postsDetailInfo.postsTags"/>
      <PostNavBtn :prev="prevPost" :next="nextPost"/>
    </div>
  </div>
  <div v-else>
    <div class="container">
      <div class="text-center">
        <h1 class="headline"></h1>
        <p>
        </p>
        <div class="center">
          <!--          <Avatar />-->
          <vs-alert></vs-alert>
          <span class="margin">
          </span>
        </div>
      </div>

      <a-layout-content
        style="white-space: pre-wrap;
        font-size: 25px;
        font-family: 'Rage Italic';
        color: antiquewhite;
        margin-bottom: 60px">
      </a-layout-content>
      <hr>
    </div>
  </div>
</template>

<script>
// import Avatar from '@/components/Avatar.vue'
import PostNavBtn from '@/components/PostNavBtn.vue'
import PostTags from '@/components/PostTags.vue'
import axios from 'axios'
import moment from 'moment'
// import { VEmojiPicker } from 'v-emoji-picker'
export default {
  name: 'ViewPost',
  components: {
    // Avatar,
    // VEmojiPicker,
    PostNavBtn,
    PostTags
  },
  data: function () {
    return {
      pack: '',
      // pagination: {
      //   onChange: page => {
      //     console.log(page)
      //   },
      //   pageSize: 3,
      //   total: 10
      // },
      data: [],
      emoVis: false,
      moment,
      postId: this.$route.path.split('posts/')[1],
      posts: this.getConfig('posts.json').posts,
      postsDetailInfo: null,
      commentInfoList: [],
      commentInfoTotal: 0,
      commentInfoPage: 1,
      commentInfoSize: 6,
      commentContent: '',
      post: {
        title: 111,
        cover: 'https://www.duanqing.online:9000/sourcebucket/333.jpg',
        date: [
          null,
          null,
          null
        ],
        tags: []
      },
      config: this.getConfig().config,
      prevPost: {
        title: null,
        id: null
      },
      nextPost: {
        title: null,
        id: null
      }
    }
  },
  methods: {
    getPostDetail: function () {
      const loading = this.$vs.loading({
        text: '只需要喝杯茶的时间~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
        type: 'rectangle'
      })
      setTimeout(() => {
        loading.close()
      }, 1200)
      this.postId = this.$route.params.index
      axios({
        url: `/api/blog/postsDetailsInfo/${this.postId}`,
        method: 'post'
      }).then(async (res) => {
        // this.postsList = res.data.data
        // console.log(res.data.data)
        this.postsDetailInfo = res.data.data
      })
    },
    getCommentByPostId: function () {
      this.postId = this.$route.params.index
      var query = {
        postId: this.postId,
        page: this.commentInfoPage,
        size: this.commentInfoSize
      }
      axios({
        url: '/api/blog/commentInfo/listPage',
        method: 'post',
        data: query
      }).then(async (res) => {
        // this.postsList = res.data.data
        // console.log(res.data.data)
        this.commentInfoList = res.data.data
        this.commentInfoTotal = res.data.count
        console.log(this.commentInfoTotal)
      })
    },
    commitComment: function () {
      if (this.commentContent !== null && this.commentContent !== '') {
        this.postId = this.$route.params.index
        var query = {
          postId: this.postId,
          comment: this.commentContent
        }
        axios({
          url: '/api/blog/commentInfo',
          method: 'post',
          data: query
        }).then(async (res) => {
          this.commentContent = ''
          this.getCommentByPostId()
        })
      } else {
        this.openNotification('top-left', 'danger', 4)
      }
    },
    openNotification: function (position = null, color) {
      this.$vs.notification({
        progress: 'auto',
        color,
        position,
        title: '评论失败',
        text: '空的评论我可不要~~~~~'
      })
    },
    selectEmoji: function (emoji) {
      console.log(emoji)
    },
    emoVisClick: function () {
      console.log('this.emoVis')
      this.emoVis = !this.emoVis
      console.log(this.emoVis)
    },
    preview: function () {
      console.log('----')
    }
  },
  mounted: function () {
    this.getCommentByPostId()
    this.getPostDetail()
  },
  watch: {
    $route (to, from) {
      this.getPostDetail()
    }
  }
}
</script>

<style>
.cover {
  width: 100%;
  height: 50%;
}

.margin {
  margin-left: 20px;
}

.post img { /* limit image max width to 100vw in a post */
  max-width: 100%;
}

.ant-list-pagination li {
  display: inline-flex;
  margin-right: 10px;
  list-style: none;
  text-decoration: none;
}
</style>
